昨日我們介紹了 AJAX，以及它在 JS 中如何實作，但是原生的 XHR 並不好用，除了使用套件來補足以外，其實還可以使用 HTML5 出來的 Fetch。

Fetch 語法是基於 Promise 的，也就是一直 then 下去、然後 catch 處理錯誤狀況，至於 Promise 我們明天即將提到，今天就先來看看 Fetch 如何使用吧!

Fetch

Fetch 一樣可以用來發出 http request，在得到 server 成功回應後，會回傳一個物件型態的 response。

程式碼大概長這樣

fetch("http://xxx", { method: 'GET' })
.then(function(response) {
    console.log(response);
})
.catch(function(error) {
    console.log(error);
})

(網址是自己的 API，所以拿掉)
下方圖片主要是請求後得到的 response，

使用 Fetch 需要注意，只要是伺服器有正確回應，不管是什麼狀態碼，就算是 404 也會將 response 傳入 then 之後的 function 繼續執行，而不會進到 catch。

像是此範例中，server 搜尋不到我指定的資料，所以就回傳一個 404 的狀態碼，但是卻沒有進到 catch，因為 server 有正確回應，而不是錯誤網址直接找不到伺服器、或是連線異常等等。

此時可以透過 response 中的 ok 來判斷狀態碼是否正常，如果是 true 則表示狀態碼在於 200~299 之間。

所以可以多加個判斷

fetch("http://xxx", { method: 'GET' })
.then(function(response) {
    if (!response.ok) {
        throw new Error(response.statusText);
    }
    console.log(response);
})
.catch(function(error) {
    console.log(error);
})

But

但是還沒有完喔!

Fetch 成功後的 response 本身是個 ReadableStream 物件，所以我們還需要再透過一些方法來取得資料。

根據 MDN，常用的轉換方法有這幾個:

• arrayBuffer()
• blob()
• formData()
• json()
• text()

不過比較常會用到的應該就是 json() 和 text() 了。

知道怎麼轉換後，就來結合上方的程式碼吧!

Get JSON

第一個處理 response 的 function 中，return 的值會再傳入下一個 then 的 function 中，也就是我們需要的真正資料了。

fetch("http://xxx", { method: 'GET' })
.then(function(response) {
    if (!response.ok) {
        throw new Error(response.statusText);
    }
    
    console.log(response);
    
    return response.json(); // 轉換成 JSON 再傳入下一個 then 中處理
})
.then(function(data) {
    console.log(data);
})
.catch(function(error) {
    console.log(error);
})

Post JSON

var account = {
	name: 'Bob',
	password:'123456'
}

fetch("http://xxx", {
    method: 'POST',
    
    headers: new Headers({
        'Content-Type': 'application/json'
    })
    
    body: JSON.stringify(account)
})
.then(function(response) {
    return response.json(); 
})
.then(function(data) {
    console.log(data);
})
.catch(function(error) {
    console.log(error);
})

Fetch 還有很多參數可以帶，像是 cache 還有 憑證 (ex: cookie)是否帶上: {credentials: 'include'} ...
有興趣的可以自己深入研究，基本上這些就已經符合大部分需求了。

今日的分享就到這，我們明天見